<template>

  <div>
    <el-row :gutter="2">
      <el-col :span="12">

        <el-card class="box-card" style="width: 100%">
          <div slot="header" class="clearfix">
            <span>待配货</span>
            <el-button @click="$router.push('/outbound/outbound_record')" style="float: right; padding: 3px 0"
                       type="text">前往配货
            </el-button>
          </div>
          <div>
            <el-table
              :data="list"
              style="width: 100%;margin-bottom: 20px;"
              row-key="id"
              border
            >
              <el-table-column
                prop="agency"
                label="经销商"
                sortable
                width="180">
              </el-table-column>
              <el-table-column
                prop="invoice_no"
                label="发票号"
                sortable
                width="180">
              </el-table-column>
              <el-table-column
                prop="product_name"
                label="产品名"
                sortable
                width="180">
              </el-table-column>
              <el-table-column
                prop="daipeihuo"
                label="待配货数量"
                sortable
                width="180">
              </el-table-column>



            </el-table>
          </div>

        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card" style="width: 100%">
          <div slot="header" class="clearfix">
            <span>库存</span>
          </div>
          <div>
            <el-table
              :data="product_list"
              style="width: 100%;margin-bottom: 20px;"
              row-key="id"
              border
            >
              <el-table-column
                prop="product_name"
                label="产品名"
                sortable
                width="90">
              </el-table-column>
              <el-table-column
                prop="lilun_amount"
                label="采购单-已开票"
                sortable
                width="90">
              </el-table-column>
              <el-table-column
                prop="amount"
                label="入库数-已开票"
                sortable
                width="90">
              </el-table-column>

<!--              <el-table-column-->
<!--                prop="bf"-->
<!--                label="效期"-->
<!--                sortable-->
<!--                width="180">-->
<!--              </el-table-column>-->
<!--              <el-table-column-->
<!--                prop="warehouse"-->
<!--                label="仓库"-->
<!--                sortable-->
<!--                width="180">-->
<!--              </el-table-column>-->
            </el-table>
          </div>

        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="2">
      <el-col :span="12">

        <el-card class="box-card" style="width: 100%">
          <div slot="header" class="clearfix">
            <span>快速导航</span>

          </div>
          <div>
            <el-button plain type="success" @click="$router.push('/inbound/inbound')">采购单
            </el-button>
            <el-button plain type="warning" @click="$router.push('/inbound/inbound_record')" >入库
            </el-button>
            <el-button plain type="primary" @click="$router.push('/outbound/outbound')" >开票
            </el-button>
            <el-button plain type="info" @click="$router.push('/outbound/outbound_record')" >配货
            </el-button>
          </div>

        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card" style="width: 100%">
          <div slot="header" class="clearfix">
            <span>库存流量图</span>
          </div>
          <div id="main" style="width: 100%;height: 270px;" />
        </el-card>
      </el-col>
    </el-row>
  </div>


</template>

<script>
import echarts from 'echarts'
import { mapGetters } from 'vuex'
import { check_actstock, dashboard_outbound, peihuo_goods } from '../../api/outbound'
import { stock_flow } from '../../api/other'

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  data() {
    return {
      user: true,
      list: [],
      product_list: [],
      week_list:[],
      inbound_lst:[],
      outbound_lst:[],
      stock_lst:[],
      }
  },
  mounted() {
    this.check_outbound_record();
    this.flow();
  },
  methods: {
    flow(){
      stock_flow().then(res => {
        this.week_list = res.data.week_list
        this.inbound_lst = res.data.inbound_lst
        this.outbound_lst = res.data.outbound_lst
        this.stock_lst = res.data.stock_lst
        // console.log(Math.max.apply(null,this.stock_lst))
        var echarts = require('echarts')
        // 初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'))
        // 配置参数
        var option = {
          tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
              type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          legend: {
            data:['利润', '支出', '收入']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis : [
            {
              type : 'category',
              axisTick : {show: false},
              data : this.week_list
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '进出货量',
              min: -Math.max(Math.max.apply(null,this.inbound_lst),-Math.min.apply(null,this.outbound_lst)),
              max: Math.max(Math.max.apply(null,this.inbound_lst),-Math.min.apply(null,this.outbound_lst)),
              position: 'left',
              axisLabel: {
                formatter: '{value} 罐'
              }
            },
            {
              type: 'value',
              name: '库存',
              min: -Math.max.apply(null,this.stock_lst),
              max: Math.max.apply(null,this.stock_lst),
              position: 'right',
              axisLabel: {
                formatter: '{value} '
              }
            }
          ],
          series : [
            {
              name:'库存',
              type:'line',
              yAxisIndex: 1,
              label: {
                normal: {
                  show: true,
                  position: 'inside'
                }
              },
              data:this.stock_lst
            },
            {
              name:'进货量',
              type:'bar',
              stack: '总量',
              label: {
                normal: {
                  show: true
                }
              },
              data:this.inbound_lst
            },
            {
              name:'出货量',
              type:'bar',
              stack: '总量',
              label: {
                normal: {
                  show: true,
                  position: 'left'
                }
              },
              data:this.outbound_lst
            }
          ]
        };
        myChart.setOption(option)}
      )
    },

    check_outbound_record() {
      this.list = []
      dashboard_outbound().then(res => { this.list = res['data'] })
      peihuo_goods().then(ress => {
        // console.log(res["list"])
        this.product_list = []
        // console.log(ress)
        for (let index = 0; index < ress.options.length; index++) {
          this.product_list.push({ id: '', inbound_no: '', product_name: '', amount: '',lilun_amount: '', bf: '', warehouse: '' })
          this.product_list[index].id = ress.options[index][0]
          this.product_list[index].inbound_no = ress.options[index][1]
          this.product_list[index].product_name = ress.options[index][2]
          this.product_list[index].amount = ress.options[index][8]
          this.product_list[index].lilun_amount = ress.options[index][9]
          this.product_list[index].bf = ress.options[index][3]
          this.product_list[index].warehouse = ress.options[index][5]
        }
      }
      )
    },

  }
}
</script>

<style lang="scss" scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

//.box-card {
//  width: 480px;
//}
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
